<template>
	<view class="store">
		<view class="store__score">
			<view class="store__score--left">
				<view class="store__score--left-text">剩余可用积分：</view>
				<view class="store__score--left-num">{{score}}</view>
			</view>
			<view class="store__score--right" @click="goPageStoreList">
				<image src="@/static/theme/default/community/detail.png" mode=""></image>
				<text>兑换明细</text>
			</view>
		</view>
		<view class="store__body">
			<view class="store__body--left">
				<view class="card" v-for="item in listLeft" :key="item.BatchId" @click="goPage(item)">
					<view class="card__mask" v-if="item.isNone">
						<view class="card__mask--text">已售罄</view>
					</view>
					<view class="card__mask" v-else-if="item.isLimit">
						<view class="card__mask--text">限购次数已用尽</view>
					</view>
					<view class="card__limit" :class="item.isLimit || item.isNone ? 'disabled' : ''">
						<text class="card__limit--des">每人限购</text>
						<text class="card__limit--num">{{item.MyApplyNum}}</text>
						<text>/</text>
						<text class="card__limit--num">{{item.UserLimit}}</text>
					</view>
					<view class="card__image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="card__name">
						<text>{{item.GiftName}}</text>
						<text v-if="item.GiftName && item.BatchScale">*</text>
						<text>{{item.BatchScale}}</text>
					</view>
					<view class="tag" :class="item.isLimit || item.isNone ? 'disabled' : ''" v-if="item.startTime !== true">即将开放</view>
					<view class="card__price">
						<view class="card__price--left">
							<text class="card__price--left-text" :class="item.isLimit || item.isNone ? 'font-disabled' : ''">{{item.CostScore}}</text>
							<text class="card__price--left-des">积分</text>
						</view>
						<view class="card__price--right">
							<text>库存</text>
							<text>{{item.stock}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="store__body--right">
				<view class="card" v-for="item in listRight" :key="item.BatchId" @click="goPage(item)">
					<view class="card__mask" v-if="item.isNone">
						<view class="card__mask--text">已售罄</view>
					</view>
					<view class="card__mask" v-else-if="item.isLimit">
						<view class="card__mask--text">限购次数已用尽</view>
					</view>
					<view class="card__limit" :class="item.isLimit || item.isNone ? 'disabled' : ''">
						<text class="card__limit--des">每人限购</text>
						<text class="card__limit--num">{{item.MyApplyNum}}</text>
						<text>/</text>
						<text class="card__limit--num">{{item.UserLimit}}</text>
					</view>
					<view class="card__image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="card__name">
						<text>{{item.GiftName}}</text>
						<text v-if="item.GiftName && item.BatchScale">*</text>
						<text>{{item.BatchScale}}</text>
					</view>
					<view class="tag" :class="item.isLimit || item.isNone ? 'disabled' : ''" v-if="item.startTime !== true">即将开放</view>
					<view class="card__price">
						<view class="card__price--left">
							<text class="card__price--left-text" :class="item.isLimit || item.isNone ? 'font-disabled' : ''">{{item.CostScore}}</text>
							<text class="card__price--left-des">积分</text>
						</view>
						<view class="card__price--right">
							<text>库存</text>
							<text>{{item.stock}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import { formatImg,futureTimestampFormat } from '@/common/custom_util.js';
	
	export default {
		data() {
			return {
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				listLeft: [],
				listRight: [],
				score: '',
			}
		},
		onShow() {
			this.getSubjectGiftList();
			this.getSubjectUserLeftScore();
		},
		methods: {
			/**
			 * 获取兑换礼品列表
			 */
			getSubjectGiftList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSubjectGiftList',
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
					},
					success(res) {
						if(!res.length) {
							that.listLeft = [];
							that.listRight = [];
							return
						}
						let listLeft = [];
						let listRight = [];
						res.forEach((item,index) => {
							item.stock = item.BatchNum*1 - item.ApplyNum*1;
							item.isNone = item.stock == 0;
							item.isLimit = item.UserLimit == item.MyApplyNum;
							item.image = formatImg(item.BatchImage)
							item.startTime = futureTimestampFormat(item.StartTime)
							index % 2 == 0 ? listLeft.push(item) : listRight.push(item)
						})
						that.listLeft = listLeft;
						that.listRight = listRight;
					},
					fail() {
						that.listLeft = [];
						that.listRight = [];
						uni.showToast({
							title: '获取数据失败',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 获取用户剩余可兑换积分
			 */
			getSubjectUserLeftScore() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSubjectUserLeftScore',
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
					},
					success(res) {
						if(!res.length) return
						that.score = res[0].LeftScoreNum || res[0].LeftScoreNum == '0' ? res[0].LeftScoreNum : '';
					},
					fail() {
						that.score = '';
						uni.showToast({
							title: '获取剩余积分数据失败',
							icon: 'none'
						})
					}
				})
			},
			goPage(v) {
				uni.navigateTo({
					url: './store-detail?id=' + v.BatchId
				})
			},
			goPageStoreList() {
				uni.navigateTo({
					url: './store-list'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.store {
		
		&__score {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			
			&--left {
				display: flex;
				align-items: center;
				
				&-text {
					
				}
				
				&-num {
					width: 300rpx;
					height: 70rpx;
					background-color: #f5f5f5;
					border-radius: 20rpx;
					font-size: 45rpx;
					font-weight: bold;
					color: #ff7a45;
					line-height: 70rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
				}
			}
			
			&--right {
				width: 200rpx;
				height: 70rpx;
				background-color: #f5f5f5;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
			}
		}
		
		&__head {
			background-color: #fff;
		}
		
		&__body {
			display: flex;
			
			&--left {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-bottom: 20rpx;
				box-sizing: border-box;
			}
			
			&--right {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-bottom: 20rpx;
				box-sizing: border-box;
			}
		}
	}
	
	.card {
		width: 340rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
		position: relative;
		overflow: hidden;
		
		&__limit {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
			padding: 0 20rpx;
			font-size: 27rpx;
			background-color: #fff7e6;
			color: #ffa940;
			border-bottom-left-radius: 20rpx;
			
			&--des {
				margin-right: 10rpx;
			}
			
			&--num {
				font-weight: bold;
			}
		}
		
		&__image {
			height: 350rpx;
			margin-bottom: 10rpx;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx 20rpx 0 0;
			}
		}
		
		&__name {
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display:-webkit-box; //作为弹性伸缩盒子模型显示。
			-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
			-webkit-line-clamp:2; //显示的行
		}
		
		&__price {
			height: 80rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			&--left {
				height: 100%;
				
				&-text {
					font-size: 40rpx;
					color: #ffa940;
				}
				
				&-des {
					font-size: 28rpx;
					color: #aaa;
					margin-left: 10rpx;
				}
			}
			
			&--right {
				height: 100%;
				font-size: 27rpx;
				color: #aaa;
				line-height: 80rpx;
			}
		}
		
		&__mask {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: 9;
			background-color: rgba(225, 225, 225, .5);
			
			&--text {
				position: absolute;
				right: 0;
				top: 300rpx;
				height: 50rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background-color: #000;
				color: #fff;
				font-size: 25rpx;
				line-height: 50rpx;
				border-top-left-radius: 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
			}
		}
	}
	
	.tag {
		background-color: #4096ff;
		padding: 3rpx 8rpx;
		color: #fff;
		font-size: 25rpx;
		border-radius: 10rpx;
		display: inline-block;
		margin-left: 20rpx;
		height: 40rpx;
		line-height: 40rpx;
	}
	
	.disabled {
		background-color: #d9d9d9;
		color: #8c8c8c;
	}
	
	.font-disabled {
		color: #8c8c8c;
	}
</style>
